<template>
  <div class="tender">
      <my-head title="投标记录" :go="true" :ri="false"></my-head>
      <div class="content">
        <div class="tender-nav">
          <div class="tender-nav-item" v-for="(item,index) in tendernav" :key="index" @click="tab(item.navid)">
            <span :class="{active : item.navid == activenav}">
              {{item.text}}({{item.num}})
            </span>
          </div>
        </div>
        <div class="list">
          <div class="null">
            <img src="@/assets/null_hui.png" alt="">
            <p>暂无内容</p>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import Head from "@/components/Head"
export default {
  data(){
    return {
      activenav:1,
      tendernav:[
        {navid:1,text:"全部",num:0},
        {navid:2,text:"已完成",num:0},
        {navid:3,text:"投标中",num:0},
        {navid:4,text:"流标",num:0},
      ]
    }
  },
  methods:{
    tab(id){
      this.activenav = id
    }
  },
  components:{
    myHead:Head
  }
}
</script>

<style scoped lang="less">
  .tender{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .content{
      flex: 1;
      display: flex;
      flex-direction: column;
      background: #f4f4f4;
      .tender-nav{
        display: flex;
        flex-direction: row;
        background: #fff;
        margin-top: 0.01rem;
        .tender-nav-item{
          flex: 1;
          text-align: center;
          padding: 0.08rem 0;
          span{
            
            font-size: 0.16rem;
          }
          span.active{
            color: #fd8b3e;
            border-bottom: 0.02rem solid #fd8b3e;
          }
        }
      }
      .list{
        .null{
          img{
            display: block;
            width: 2.35rem;
            margin: 0 auto;
          }
          p{
            text-align: center;
            font-size: 0.15rem;
            padding: 0.14rem 0;
          }
        }
      }
    }
  }
</style>
